<!doctype html>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <title> webrtc test  </title>
    <style type="text/css">
        .room {
            cursor: pointer;
        }
        div.select {
            display: inline-block;
            margin: 0 0 1em 0;
        }
    </style>

    <script type='text/javascript'>

        window.localStorage.setItem('debug', '*');
        let container;
        var socket;

        function addVideoForStream(stream,muted)
        {
            //Create new video element
            const video = document.createElement("video");
            //Set same id
            video.id = stream.id;
            video.width = 640;
            video.height = 480;
            //Set src stream
            video.srcObject = stream;
            //Set other properties
            video.autoplay = true;
            video.playsInline = true;
            video.controls = true;
            // video.play();
            video.muted = muted;
            //Append it
            container.appendChild(video);
        }
        function removeVideoForStream(stream)
        {
            //Get video
            var video = document.getElementById(stream.id);
            //Remove it when done
            video.addEventListener('webkitTransitionEnd',function(){
                //Delete it
                video.parentElement.removeChild(video);
            });
            //Disable it first
            video.className = "disabled";
        }
        function connect()
        {
            container = document.getElementById('container');

            var pc = new RTCPeerConnection({
                bundlePolicy: "max-bundle",
                rtcpMuxPolicy : "require"
            });

            pc.onaddstream = function(event) {
                console.debug("pc::onAddStream",event);
                //Play it
                addVideoForStream(event.stream);
            };

            pc.onremovestream = function(event) {
                console.debug("pc::onRemoveStream",event);
                //Play it
                removeVideoForStream(event.stream);
            };
            socket = new WebSocket('ws://localhost:8000/channel');
            socket.onopen = async () => {


                pc.addTransceiver("audio",{direction:"recvonly"});
                pc.addTransceiver("video",{direction:"recvonly"});

                //Create  offer
                const offer = await pc.createOffer();

                //Set it
                pc.setLocalDescription(offer);
                console.log("offer ==== ",offer.sdp);
                socket.send(JSON.stringify({
                    cmd: 'offer',
                    sdp: offer.sdp
                }));
            };

            socket.onmessage  = async (event) =>{
                var data = JSON.parse(event.data);
                console.log(data);
                if (data.sdp) {
                    //Create answer
                    const answer = new RTCSessionDescription({
                        type	:'answer',
                        sdp	: data.sdp
                    });
                    console.debug(answer.sdp);
                    await pc.setRemoteDescription(answer);
                }
            };
        }

    </script>

</head>
<body onload="connect();">
<h1>MediaServer  Demo</h1>
<br/>

<div id="conference">
    videos:
    <br />
    <div id="container"></div>
</div>
</body>


</html>